<template>
  <view class="container">
    <!-- 分段控制组件 -->
    <view class="segmented-control">
      <view 
        :class="{'active': current === 0}" 
        @click="current = 0"
      >关注</view>
      <view 
        :class="{'active': current === 1}" 
        @click="current = 1"
      >推荐</view>
    </view>

    <!-- 内容区域 -->
    <scroll-view 
      class="content" 
      scroll-y 
      scroll-with-animation
      style="height: 100%;"
    >
      <!-- 关注的帖子 -->
      <view v-if="current === 0" class="post" v-for="(post, index) in posts" :key="post.id">
        <view class="post-header">
          <image class="avatar" :src="post.avatar"></image>
          <view class="username">{{ post.username }}</view>
        </view>
        <view class="post-content">
          <view class="post-images">
            <image 
              v-for="(image, index) in post.images" 
              :key="index"
              :src="image"
              class="post-image"
              mode="widthFix"
            ></image>
          </view>
          <view v-html="post.content"></view>
        </view>
        <view class="post-footer">
          <view class="action-buttons">
            <view class="like-button" @click="handleLike(post.id)">
              <img src="../../static/like-icon.png" alt="Like" class="icon"/>
              <text>{{ post.likes }}</text>
            </view>
            <view class="comment-button" @click="handleComment(post.id)">
              <img src="../../static/comment-icon.png" alt="Comment" class="icon"/>
              <text>{{ post.comments }}</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 推荐的帖子 -->
      <view v-if="current === 1" class="post" v-for="(post, index) in recommendedPosts" :key="post.id">
        <view class="post-header">
          <image class="avatar" :src="post.avatar"></image>
          <view class="username">{{ post.username }}</view>
        </view>
        <view class="post-content">
          <view class="post-images">
            <image 
              v-for="(image, index) in post.images" 
              :key="index"
              :src="image"
              class="post-image"
              mode="widthFix"
            ></image>
          </view>
          <view v-html="post.content"></view>
        </view>
        <view class="post-footer">
          <view class="action-buttons">
            <view class="like-button" @click="handleLike(post.id)">
              <img src="../../static/like-icon.png" alt="Like" class="icon"/>
              <text>{{ post.likes }}</text>
            </view>
            <view class="comment-button" @click="handleComment(post.id)">
              <img src="../../static/comment-icon.png" alt="Comment" class="icon"/>
              <text>{{ post.comments }}</text>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      current: 0,
      posts: [
        {
          id: 1,
          username: '用户0936TK12',
          avatar: '/static/communityP1.jpg',
          content: `挥洒汗水诠释快乐，阳光体育源于热爱，体力无限源于活力，向积极出发，收获健康与喜悦！`,
          likes: 3,
          comments: 3,
          images: ['/static/communityR4.jpg'] 
        },
        {
          id: 2,
          username: '用户331YH11',
          avatar: '/static/communityP2.jpg',
          content: '跑步是一种修行，心情不好，能跑没烦恼，推荐给大家！',
          likes: 2,
          comments: 3,
          images: []
        },
        {
          id: 3,
          username: '用户18H423',
          avatar: '/static/communityP3.jpg',
          content: '昨晚吃多了，今天目前为止只喝了杯咖啡。',
          likes: 2,
          comments: 3,
          images: ['/static/communityPC3.jpg']
        },
        {
          id: 4,
          username: '用户LK734GB',
          avatar: '/static/communityP4.jpg',
          content: '最近偷懒了，明显感觉第二年没刚开始健身强，还是要坚持下去，一路走来真不容易，希望所有健身人都可以找到适合自己的健身节奏。',
          likes: 7,
          comments: 3,
          images: ['/static/communityR7.jpg']
        },
        {
          id: 5,
          username: '用户098QV2',
          avatar: '/static/communityP5.jpg',
          content: '春乏夏困的时间已经过去了，开启夏季的晨跑打卡，同样的时间、地点，不走重复路，不喜欢在一条线上来回奔跑，但愿意每天感受不同的风景；春天的气温，还没有夏日的炎热，冲刺吧，不追求速度、不追求距离，把这个习惯坚持下去就行了！',
          likes: 5,
          comments: 3,
          images: []
        }
      ],
      recommendedPosts: [
        {
          id: 6,
          username: '推荐用户001',
          avatar: '/static/communityR1.jpg',
          content: '这是推荐内容1：推荐用户分享的健康生活小技巧。',
          likes: 5,
          comments: 3,
          images: []
        },
        {
          id: 7,
          username: '推荐用户002',
          avatar: '/static/communityR2.jpg',
          content: '这是推荐内容2：推荐用户分享的健身心得。',
          likes: 8,
          comments: 3,
          images: ['/static/communityPC2.jpg']
        },
        {
          id: 8,
          username: '推荐用户003',
          avatar: '/static/communityR3.jpg',
          content: '这是推荐内容3：推荐用户分享的营养饮食建议。',
          likes: 12,
          comments: 3,
          images: []
        },
        {
          id: 9,
          username: '推荐用户004',
          avatar: '/static/communityR4.jpg',
          content: '这是推荐内容4：推荐用户分享的运动装备评测。',
          likes: 9,
          comments: 3,
          images: []
        },
        {
          id: 10,
          username: '推荐用户005',
          avatar: '/static/communityR5.jpg',
          content: '这是推荐内容5：推荐用户分享的户外活动经验。',
          likes: 14,
          comments: 3,
          images: []
        },
        {
          id: 11,
          username: '推荐用户006',
          avatar: '/static/communityR6.jpg',
          content: '这是推荐内容6：推荐用户分享的健康饮食计划。',
          likes: 11,
          comments: 3,
          images: []
        },
        {
          id: 12,
          username: '推荐用户007',
          avatar: '/static/communityR7.jpg',
          content: '这是推荐内容7：推荐用户分享的瑜伽入门指南。',
          likes: 13,
          comments: 3,
          images: []
        }
      ],
      selectedPostId: null,
      showOptions: false
    };
  },
  methods: {
    handleLike(postId) {
      uni.showModal({
        title: '确认点赞',
        content: '你确定要点赞该帖子吗？',
        success: (res) => {
          if (res.confirm) {
            this.toggleLike(postId);
          }
        }
      });
    },
    handleComment(postId) {
      uni.showModal({
        title: '确认评论',
        content: '你确定要评论该帖子吗？',
        success: (res) => {
          if (res.confirm) {
            this.goToComments(postId);
          }
        }
      });
    },
    goToLikes(postId) {
      uni.navigateTo({
        url: `/pages/Likes/Likes?postId=${postId}`,
        success: () => {
          this.selectedPostId = null;
          this.showOptions = false;
          console.log('成功跳转至点赞页面，帖子ID:', postId);
        },
        fail: (err) => {
          console.error('跳转至点赞页面失败:', err);
          uni.showToast({
            title: '跳转失败，请检查页面配置',
            icon: 'none'
          });
        }
      });
    },
    goToComments(postId) {
      uni.navigateTo({
        url: `/pages/Comments/Comments?postId=${postId}`,
        success: () => {
          this.selectedPostId = null;
          this.showOptions = false;
        },
        fail: (err) => {
          console.error('跳转至评论页面失败:', err);
        }
      });
    },

     toggleLike(postId) {
       const post = this.posts.find(p => p.id === postId);
       if (post) {
         post.likes = post.likes + (post.isLiked ? -1 : 1);
         post.isLiked = !post.isLiked;
         console.log('更新后的点赞状态:', post.likes, post.isLiked);
         this.likeCount = this.posts.reduce((acc, p) => acc + (p.isLiked ? 1 : 0), 0);
         console.log('总点赞数:', this.likeCount);
       } else {
         console.error('未找到对应的帖子，ID:', postId);
         // 可以在这里添加用户提示，告知未找到帖子
         uni.showToast({
           title: '未找到帖子',
           icon: 'none'
         });
       }
     },
             addComment(postId, comment) {
                 const MAX_COMMENT_LENGTH = 200; // 新增：评论最大长度
                 if (comment.length > MAX_COMMENT_LENGTH) {
                     alert(`评论长度不能超过 ${MAX_COMMENT_LENGTH} 个字符！`);
                     return;
                 }
                 const post = this.posts.find(p => p.id === postId);
                 if (post && comment.trim() !== '') {
                     post.comments.push(comment);
                     post.commentsCount++;
                     this.newComment = ''; // 清空输入框
                 } else {
                     alert('评论内容不能为空！');
                 }
             }
         },
     }
     </script>   
	  
<style scoped>
/* 容器设置 */
.container {
  display: flex; /* 使用flex布局 */
  flex-direction: column; /* 子元素垂直排列 */
  height: 100vh; /* 占据整个视口高度 */
  background: linear-gradient(to bottom, #e6f7ff,#00F5FF); /* 背景使用从浅蓝到深蓝的渐变 */
  box-shadow: inset 0 -5px 10px rgba(0, 0, 0, 0.05); /* 内阴影效果增加深度感 */
}

/* 分段控件样式 */
.segmented-control {
  display: flex; /* 使用flex布局 */
  justify-content: space-around; /* 均匀分布子元素 */
  background-color: #89dffe; /* 白色背景 */
  padding: 10px 0; /* 上下内边距 */
  border-radius: 5px; /* 圆角效果 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 添加阴影效果，使其看起来更加立体 */
}

.segmented-control view {
  padding: 8px 16px; /* 设置内边距 */
  cursor: pointer; /* 鼠标悬停时变为手型 */
  font-size: 16px; /* 字体大小 */
  transition: all 0.3s ease; /* 平滑过渡效果 */
}

.segmented-control view:hover {
  color: #007aff; /* 悬停时文字颜色改变 */
}

.segmented-control view.active {
  color: #007aff; /* 当前选中项文字颜色 */
  border-bottom: 2px solid #007aee; /* 底部边框突出显示 */
  font-weight: bold; /* 加粗字体 */
}

/* 主内容区域 */
.content {
  flex: 1; /* 自动填充剩余空间 */
  overflow-y: auto; /* 纵向滚动条 */
  padding: 10px; /* 内边距 */
  background-color: #BBFFFF; /* 轻微的背景色 */
}

/* 帖子卡片 */
.post {
  margin-bottom: 20px; /* 下边距 */
  padding: 15px; /* 内边距 */
  background-color: #F0FFFF; /* 白色背景 */
  border-radius: 14px; /* 圆角效果 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 阴影效果 */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* 平滑缩放和阴影变化效果 */
}

.post:hover {
  transform: scale(1.02); /* 鼠标悬停时稍微放大 */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); /* 更大的阴影效果 */
}

/* 帖子头部 */
.post-header {
  display: flex; /* 使用flex布局 */
  align-items: center; /* 垂直居中对齐 */
  margin-bottom: 10px; /* 下边距 */
}

.avatar {
  width: 40px; /* 头像宽度 */
  height: 40px; /* 头像高度 */
  border-radius: 50%; /* 圆形头像 */
  margin-right: 10px; /* 右边距 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 小阴影效果 */
}

.username {
  font-weight: bold; /* 加粗字体 */
  font-size: 14px; /* 字体大小 */
  color: #333; /* 文字颜色 */
}

/* 帖子图片 */
.post-images .post-image {
  width: 110px; /* 图片宽度占满容器 */
  max-width: 200px; /* 最大宽度限制 */
  height: auto; /* 根据比例自动调整高度 */
  margin-bottom: 10px; /* 下边距 */
  border-radius: 8px; /* 圆角效果 */
  object-fit: cover; /* 图片裁剪方式 */
}

/* 帖子底部 */
.post-footer {
  display: flex; /* 使用flex布局 */
  justify-content: space-between; /* 左右对齐 */
  align-items: center; /* 垂直居中对齐 */
  padding: 10px; /* 内边距 */
  border-top: 1px solid #ddd; /* 上边框 */
  background-color: #f9f9f9; /* 轻微的背景色 */
  border-radius: 0 0 12px 12px; /* 圆角效果 */
}

/* 动作按钮 */
.action-buttons {
  display: flex; /* 使用flex布局 */
  justify-content: space-between; /* 左右对齐 */
  width: 100%; /* 占满父级宽度 */
}

.like-button, .comment-button {
  display: flex; /* 使用flex布局 */
  justify-content: center; /* 居中对齐 */
  align-items: center; /* 垂直居中对齐 */
  width: 50%; /* 占用一半宽度 */
  padding: 8px; /* 内边距 */
  border-radius: 8px; /* 圆角效果 */
  transition: background-color 0.3s ease; /* 平滑过渡背景色 */
}

.like-button:hover, .comment-button:hover {
  background-color: #e6f7ff; /* 鼠标悬停时背景色 */
}

.icon {
  width: 24px; /* 图标宽度 */
  height: 24px; /* 图标高度 */
  margin-right: 5px; /* 右边距 */
  color: #F0F8FF; /* 图标颜色 */
  transition: color 0.3s ease; /* 平滑过渡图标颜色 */
}

.like-button:hover .icon, .comment-button:hover .icon {
  color: #007aff; /* 鼠标悬停时图标颜色 */
}
</style>